import ProList from '@ant-design/pro-list';
import { Button, Card, Col, message, Modal, Row, Statistic } from 'antd';
import { useEffect, useState } from 'react';
import {
  addTargetFl,
  cxlq_c_zb,
  delTargetFl,
  editTargetFl,
  getTargetFl,
} from '@/services';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { useParams } from 'umi';
import ProTable, { ProColumns } from '@ant-design/pro-table';

const columns: ProColumns<any>[] = [
  {
    dataIndex: 'name',
    title: '指标名称',
  },
  {
    dataIndex: 'value',
    title: '指标值',
  },
  {
    dataIndex: 'sqvalue',
    title: '上期指标值',
    render: (_, record) => {
      return record.sj === 'false' ?  '无上期' : record.sqvalue
    }
  },
  {
    dataIndex: 'bj',
    title: '比较',
    render: (_, record) => {
      return record.sj === 'false' ? '无上期' : record.bj 
    }
  },
  {
    dataIndex: 'shu',
    title: '百分比',
    render: (_, record) => {
      return record.sj === 'false' ? '无上期' : record.shu 
    }
  },
];

export default () => {
  const { fl, km } = useParams<{ fl: string; km: string }>();
  const query = async () => {
    const data = await cxlq_c_zb({
      time: fl,
      flid: km,
    });
    if (data.msg === '失败') {
      message.error(data.content);
      return {
        data: []
      }
    }
    return {
      data: data.content,
    };
  };
  return (
    <div style={{ display: 'flex', height: '100%' }}>
      <div
        style={{
          width: '100%',
          height: '100%',
          marginRight: '8px',
          background: '#fff',
        }}
      >
        <ProTable
          columns={columns}
          request={query}
          defaultSize="small"
          search={false}
        />
        {/* <div className="site-statistic-demo-card">
          <Row gutter={16}>
            <Col span={12}>
              <Card>
                <Statistic
                  title="Active"
                  value={11.28}
                  precision={2}
                  valueStyle={{ color: '#3f8600' }}
                  prefix={<ArrowUpOutlined />}
                  suffix="%"
                />
              </Card>
            </Col>
            <Col span={12}>
              <Card>
                <Statistic
                  title="Idle"
                  value={9.3}
                  precision={2}
                  valueStyle={{ color: '#cf1322' }}
                  prefix={<ArrowDownOutlined />}
                  suffix="%"
                />
              </Card>
            </Col>
          </Row>
        </div> */}
      </div>
    </div>
  );
};
